import { _decorator, Button, CCString, Color, Component, Input, Label, Node, UIOpacity, UITransform, Vec3} from 'cc';
import { NodeName } from '../../utils/common';

const { ccclass, property } = _decorator;


@ccclass('Select')
export class Select extends Component {
    @property([CCString])
    public SelectOptionData = ["历史"];

    private trigger_button: Node = null;
    private select_box_node: Node = null;
    private is_open: boolean = false;

    protected onLoad(): void {
        // ---------------------找到对应的节点--------------------------
        this.trigger_button = this.node.getChildByName(NodeName.CreateLiveRoomScene.Button.TriggerButton);
        this.select_box_node = this.node.getChildByName(NodeName.CreateLiveRoomScene.Node.SelectBoxNode);
        // ---------------------给节点绑定函数---------------------
        this.trigger_button.on(Button.EventType.CLICK, this.onTriggerButtonClick, this);

        // ---------------动态生成选项数据-------------
        this.createOptionLabel();
        // 需要重新设置select_box_node的位置
        this.initSelectBoxNodePosition();
        // 给每个选项添加一个点击事件
        this.optionNodeClick();
    }

    protected onDestroy(): void {
        if (this.trigger_button !== null && this.trigger_button !== undefined && this.trigger_button.name.length){
            this.trigger_button.off(Button.EventType.CLICK, this.onTriggerButtonClick, this);
        }
        this.destroyOptionNodeClick();
    }

    destroyOptionNodeClick() {
        let option_array = this.select_box_node.getComponentsInChildren(Label);
        option_array.forEach((label) => {
            label.node.on(Input.EventType.TOUCH_START, this.onOptionLabelMouseDown, this);
            label.node.on(Input.EventType.MOUSE_MOVE, this.changeOptionBackgroundMouseMove, this);
        })
    }

    createOptionLabel(){
        for (let text of this.SelectOptionData) {
            let node = new Node();
            this.select_box_node.addChild(node);
            // 创建一个Label组件并添加到节点上
            let label = node.addComponent(Label);
            label.name = text;
            label.string = text;
            label.fontSize = 20;
            label.lineHeight = 20;
            label.color = new Color(0, 0, 0, 255);
            // 设置位置
        }
    }

    initSelectBoxNodePosition() {
        const pos = this.select_box_node.position;
        const trigger_button_height = this.trigger_button.getComponent(UITransform).height;
        this.select_box_node.setPosition(new Vec3(pos.x, pos.y - trigger_button_height * 1.2, pos.z));
    }

    optionNodeClick() {
        /**
         * 选项节点点击事件——点击谁便选中谁的text值
        */
        let option_array = this.select_box_node.getComponentsInChildren(Label);
        option_array.forEach((label) => {
            label.node.on(Input.EventType.TOUCH_START, this.onOptionLabelMouseDown, this);
            label.node.on(Input.EventType.MOUSE_MOVE, this.changeOptionBackgroundMouseMove, this);
        })
    }

    onOptionLabelMouseDown(event: TouchEvent) {
        let _components = event['target']['components'];
        for (let com of _components) {
            if (com.getComponent(Label) === undefined || com.getComponent(Label) === null) {
            } else {
                this.trigger_button.getChildByName('Label').getComponent(Label).string = com.getComponent(Label).string;
                this.onTriggerButtonClick();
                break;
            }
        }
    }
    
    onTriggerButtonClick() {
        let pos = this.select_box_node.position;
        this.is_open = !this.is_open;
        if (this.is_open) {
            this.select_box_node.getComponent(UIOpacity).opacity = 255;
            this.select_box_node.setPosition(pos.x, pos.y, pos.x + 0);
        } else {
            this.select_box_node.getComponent(UIOpacity).opacity = 0;
            this.select_box_node.setPosition(pos.x, pos.y, pos.x + 1000);
        }
    }

    changeOptionBackgroundMouseMove(event: MouseEvent) {
        /**
         * 鼠标移动修改选项的背景颜色——未完成
        */
        // let _components = event['target']['components'];
        // // console.log("这里：", event);
        // // console.log('带英：', _components);
        // for (let com of _components) {
        //     if (com.getComponent(Label) === undefined || com.getComponent(Label) === null) {
        //     } else {
        //         com.getComponent(Label).color = new Color(0, 0, 0, 255);
        //         console.log('龙：', com.getComponent(Label));
        //         // this.clicked_option_value = com.getComponent(Label).string;
        //         // this.trigger_button.getChildByName('Label').getComponent(Label).string = com.getComponent(Label).string;
        //         // this.onTriggerButtonClick();
        //         break;
        //     }
        // }
    }

}


